<template>
  <div class="indexFour">
    <h2>
      <i class="iconfont icon-huo mini"></i>
      <i class="iconfont icon-huo middle"></i>
      <i class="iconfont icon-huo "></i> 每日爆款 <i class="iconfont icon-huo "></i>
      <i class="iconfont icon-huo middle"></i>
      <i class="iconfont icon-huo mini"></i>
      <!-- <a
            class="more"
           href="http://www.higuang365.com/wap/#/doubleEleven"
            >更多></a> -->
            <a
            class="more"
           href="http://www.higuang365.com/index.php/wap/#/summer"
            >更多></a>
            <!-- http://192.168.0.78:8081/#/summer -->
    </h2>
    <!-- <van-icon name="hot" color="red" style="transform: scale(1.5);"/> -->

    <van-skeleton title :row="5" v-if="popular.length == 0" />

    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      lazy-render
      :show-indicators="false"
      v-else
    >
      <van-swipe-item v-for="(value, index) in popular" :key="index">
        <div class="popular">
          <div class="popular-img">
            <img :src="'http://higuang365.com/' + value.F_pic_url" />
          </div>
          <div class="popular-text">
            <div class="title">{{ value.F_Name }}</div>
            <div class="introduce">{{ value.F_yuliu4 }}</div>
            <div>
              <span class="price">￥{{ value.F_SpecialPrice }}</span>
              <span class="estimate">{{ value.F_Amount }}</span>
              <div
                class="iconfont icon-fenxiang fenxiang"
                @click.stop="showShare(value, $store.state.userInfo.F_Question)"
              >
                立即分享
              </div>
            </div>
          </div>
        </div>
      </van-swipe-item>
      <template #indicator="{ active }">
        <div class="custom-indicator">
          {{ active + 1 }}/{{ popular.length }}
        </div>
      </template>
    </van-swipe>
  </div>
</template>
<script>
import { reactive, toRefs } from "@vue/reactivity";
import { GetTagGoodsList } from "@/api/home";
export default {
  setup() {
    const data = reactive({
      popular: [],
    });
    const onLoad = async () => {
      const res = await GetTagGoodsList({
        pageNum: 1,
        pageSize: 20,
        tag_id: 39,
        strlv: "",
      });
      data.popular = res[1];
      console.log("data-popular", data.popular);
    };

    const showShare = (value, F_Question) => {
      let purl = "http://higuang365.com/" + value.F_pic_url; //可以是本地图片
      var surl =
        "http://www.higuang365.com/wap/#/product?id=" +
        value.F_ProductId +
        "&parents_id=" +
        F_Question; //分享的链接
      let msg = {
        title: value.F_Name, //标题
        content: value.F_yuliu4, //内容
        thumbs: [purl], //缩略图
        href: surl,
        extra: {
          scene: "WXSceneChooseByUser",
        },
      };
      console.log("msg", msg);
      
      if (navigator.userAgent.indexOf("haiguang_mobile") > -1) {
        window.location.href = `higuang|shareGood|${msg.title}|${msg.content}|${purl}|${surl}`;
      } else {
        window.location.href =
          "http://www.higuang365.com/wap/#/product?id=" +
          value.F_ProductId +
          "&parents_id=" +
          F_Question;
          // "http://192.168.1.78:8080/wap/#/product?id=" +
          // value.F_ProductId +
          // "&parents_id=" +
          // value.F_yuliu1;
      }
    };
    onLoad();
    return { ...toRefs(data), showShare };
  },
};
</script>
<style lang="scss" scoped>
.indexFour {
  background: #fff;
  padding: 0 0.5rem;
  h2 {
    font-size: 2rem;
    padding: 0.5rem;
    margin: 1rem;
    border-bottom: 5px solid #f7f7f7;
    position: relative;
    i {
      color: red;
      font-size: 2rem;
    } .icon-huo {
      font-size: 2rem;
    }
    .mini {
      font-size: 1.4rem;
    }
    .middle {
      font-size: 1.7rem;
    }
    .more {
      font-size: 1rem;
      position: absolute;
      top: 1rem;
      right: 0;
      font-weight: 500;
      color: #f15e5e;
    }
  }
  .popular {
    display: flex;
    padding: 0 0.1rem;
  }
  .popular-img {
    flex: 1;
    img {
      height: auto;
    }
  }
  .popular-text {
    flex: 1.4;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    padding: 1rem;
    .title {
      font-weight: 550;
      font-size: 1.4rem;
      overflow: hidden;
      width: 80%;
      margin: 0 auto;
      height: 2rem;
      line-height: 2rem;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;
      display: -webkit-box;
    }
    .introduce {
      color: #777;
      width: 90%;
      height: 4.8rem;
      margin: auto;
      font-size: 1.1rem;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      -webkit-box-orient: vertical;
      line-height: 1.6rem;
      overflow: hidden;
    }
    .price {
      color: red;
      font-weight: 600;
      font-size: 1.6rem;
      margin-right: 1rem;
    }
    .estimate {
      font-size: 1rem;
      color: red;
    }
    .fenxiang {
      color: #0f8a40;
      padding-top: 0.5rem;
      font-size: 1.1rem;
    }
  }
}
.custom-indicator {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  padding: 0.2rem 0.5rem;
  font-size: 1.2rem;
}
</style>
